<template>
  <div class="x-pie">
    <div :id="id" class="pie-ctx"></div>
  </div>
</template>
<script>
import {
  GetUnitTotleAndType,
  GetUnitInfoForPage,
  GetDictDataEnum
} from "@/api/peopleApi";
export default {
  name: "xunitpie",
  props: {
    mapType: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: ""
    },
    datas: {
      type: Array,
      default: () => {
        return [];
      }
    },
    camerquery: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      option: {
        legend: {
          width: 20,
          // orient:"vertical",
          height: 8,
          bottom: 0,
          left: 0,
          icon: "rect",
          itemWidth: 10, // 设置宽度

          itemHeight: 8, // 设置高度

          itemGap: 10, // 设置间距
          textStyle: {
            color: "#fff",
            fontSize: 14
          }
        },
        color: [
          "#209CFF",
          "#68E0CF",
          "#DEA55C",
          "#E16757",
          "#A1F68F",
          "#AB98f8",
          "#93B29F",
          "#2b821d",
          "#005eaa"
        ],
        series: [
          {
            type: "pie",
            electedOffset: 0,
            hoverAnimation: false,
            radius: ["40%", "60%"],
            center: ["50%", "25%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.datas
          }
        ],
        grid: {
          height: 50
        }
      }
    };
  },
  created() {
    // Promise([this.GetUnitData()]);
  },
  mounted() {
    console.log("________");
    console.log(this.datas);

    this.drawPie();
  },
  // watch: {
  //   datas(val) {
  //     console.log("变化了");
  //     console.log(this.datas);
  //     if (this.datas.length > 0) {
  //       this.drawPie();
  //     }
  //   }
  // },

  methods: {
    drawPie() {
      console.log(this.datas);
      let echarts = this.$echarts.init(document.getElementById(this.id));
      if (this.mapType === "education") {
        let legend = [];
        this.option.series[0].data.forEach((element, index) => {
          legend.push({
            orient: "horizontal",
            x: "50%",
            y: (index + 1) * 9.5 + "%",
            align: "left",
            data: [element.name],
            width: 20,
            height: 8,
            icon: "rect",
            itemWidth: 10, // 设置宽度
            itemHeight: 8, // 设置高度
            itemGap: 10, // 设置间距
            textStyle: {
              color: "#fff",
              fontSize: 14
            }
          });
        });
        this.option.legend = legend;
        // this.option.data = this.GetUnitData();
      }
      echarts.setOption(this.option);
    },
    async GetUnitData() {
      try {
        // let camerquery = {
        //   code: this.code,
        //   id: this.id
        // };
        // let pagequery = {
        //   code: this.code,
        //   id: this.id,
        //   lengalperson: this.lengalperson, //法人
        //   lpTelePhone: this.lpTelePhone, //法人电话
        //   lpidCard: this.lpidCard, //法人身份证号
        //   unitName: this.unitName, //单位名称,
        //   unitTelePhone: this.unitTelePhone, //单位电话
        //   unitType: this.unitType, //单位类型
        //   pageNum: this.pageNum,
        //   pageSize: this.pageSize
        // };
        // console.log(pagequery);
        // this.datas = await GetUnitTotleAndType(this.camerquery);
        // console.log(GetUnitTotleAndType(this.camerquery));
        // return this.datas;
        // this.drawPie();
        // console.log("________");
        // console.log(this.datas);
        // console.log("_+_+_+");
        // console.log(this.UnitTypeEchartsData);
        // const res = await GetUnitInfoForPage(pagequery);
        // console.log("_+_+_+");
        // console.log(res);
        // this.total = res.data.total;
        // this.allpage = Math.ceil(this.total / this.pageSize);
        // console.log(this.allpage);
        // this.UnitPageEchartsData = res.data.list;
      } catch (error) {
        this.$message({
          type: "error",
          message: error
        });
      }
    },
    //获取类型
    async GetDictDataEnumList() {
      try {
        const res = await GetDictDataEnum("company_type");
        res.unshift({
          enumName: "全部",
          id: ""
        });
        this.unitTypeList = res;
      } catch (error) {
        this.$message({
          type: "error",
          message: error
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.x-pie {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .pie-ctx {
    width: 100%;
    height: 100%;
  }
}
</style>
